<template>
  <div>
    <h1>{{title}}</h1>
    <hr />
    <div>
      <h2>添加课程</h2>
      <div>
        <label for>课程名称：</label>
        <input type="text" v-model="courseInfo.name" />
      </div>
      <div>
        <label for>课程价格：</label>
        <input type="text" v-model="courseInfo.price" />
      </div>
      <div>
        <button @click="addCourseToList">添加课程到列表</button>
      </div>
    </div>
    <div>
      <h2>课程列表</h2>
      <table>
        <tr>
          <th>课程名称</th>
          <th>课程价格</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item,index) in courseList" :key="item.id">
          <td>{{item.name}}</td>
          <td>{{item.price}}</td>
          <td>
            <button @click="addCourseToCart(index)">添加到购物车</button>
          </td>
        </tr>
      </table>
    </div>
    <cart :courseItem="courseItem"  @removeItem="remove"> </cart>
  </div>
</template>

<script>
import Cart from "./cart";
export default {
  components: {
    Cart
  },
  data() {
    return {
      title: "购物车",
      courseInfo: {
        name: "",
        price: ""
      },
      courseItem: [],
      courseList: [
        {
          id: 0,
          name: "web全栈开发架构师",
          price: 9998
        },
        {
          id: 1,
          name: "Python人工智能",
          price: 8888
        }
      ]
    };
  },
  methods: {
    addCourseToList() {
      //添加到列表
      this.courseList.push(this.courseInfo);
    },
    addCourseToCart(index) {
      let item = this.courseList[index];
      //对于空数组find不会执行
      let isHasCourse = this.courseItem.find(v => v.id == item.id);
      console.log(isHasCourse)  
      if (isHasCourse) {
        isHasCourse.number+=1;
      }else {
        this.courseItem.push({
          ...item,
          number: 1,
          isActive:true
        })
      }
    },
    remove(index){  //删除课程
      this.courseItem.splice(index,1)
    }
  }
};
</script>

<style lang="scss" scoped>
div{
  padding: 10px;
}
</style>